<template>
  <base-module
    class="progress-comp"
    :title="title"
    @icon-click="handleClick"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div class="progress-container">
      <ul
        :style="{
          'justify-content': data.length > 4 ? 'space-between' : 'center',
          width: stepWidth
      }"
      >
        <li
          v-for="(item, index) in options"
          :class="['progress-item', item.progress === 100 ? 'success' : '']"
          :key="index">
          <div class="title" :title="item.title">{{ item.title }}</div>
          <div class="icon-container">
            <i :class="[
              'iconfont',
              item.progress === 100 ? 'iconqueren' : 'iconyuanquan'
            ]">
            </i>
            <div class="progress-bar" v-if="index < options.length - 1">
              <i class="iconfont iconyou" v-for="item in 6" :key="item"></i>
            </div>
          </div>
          <div class="progress-time">
            <span>{{ item.startTime }}</span>
            <span>{{ item.endTime }}</span>
          </div>
<!--          <div class="ecahrts-container" v-if="item.progress" >-->
<!--            <Histogram :options="setOptions(item.progress)"></Histogram>-->
<!--          </div>-->
        </li>
      </ul>
    </div>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';
import Histogram from '@/components/echarts/base';

export default {
  name: 'progressComp',
  props: {
    title: {
      type: String,
      default: '工程进度'
    },
    data: {
      type: Array,
      default: () => [
        {
          title: '基础阶段',
          startTime: '2020.10.23',
          endTime: '2020.10.23',
          progress: 100
        },
        {
          title: '主体阶段',
          startTime: '2020.10.23',
          endTime: '2020.10.23',
          progress: 75
        },
        {
          title: '装饰阶段',
          startTime: '2020.10.23',
          endTime: '2020.10.23',
          progress: 55
        },
        {
          title: '套配阶段',
          startTime: '2020.10.23',
          endTime: '2020.10.23',
          progress: 45
        },
        {
          title: '竣工完成',
          startTime: '2020.10.23',
          endTime: '2020.10.23',
          progress: 15
        }
      ]
    }
  },
  data() {
    return {
      progressData: []
    };
  },
  computed: {
    options() {
      // if (this.data.length) return this.data;
      return this.progressData.map(item => {
        const { milepostName, planTime, actualTime, finishFlag } = item;
        return {
          title: milepostName,
          startTime: planTime || '',
          endTime: actualTime || '',
          progress: finishFlag === '1' ? 100 : 10
        };
      });
    },
    stepWidth() {
      const len = this.progressData.length;
      return len ? this.$setRem(len * 110) : '100%';
    },
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  created() {
    this.getData();
  },
  components: {
    Histogram,
    BaseModule
  },
  methods: {
    /**
     * 设置对应环状图表
     * @param progress {String} 当前进度
     */
    setOptions(progress) {
      if (!progress) return {};
      return {
        series: [
          {
            hoverAnimation: false,
            name: '进度',
            type: 'pie',
            startAngle: 90,
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              color: '#fff'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     // fontSize: '30',
            //     fontWeight: 'bold',
            //     color: '#fff'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 100 - progress,
                itemStyle: {
                  normal: {
                    color: 'rgba(80, 150, 224, 0)'
                  }
                }
              },
              {
                name: `${progress}%`,
                value: progress,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: String(progress) === '100'
                      ? 'rgba(246, 152, 63, 1)'
                      : 'rgba(85, 201, 246, 1)'
                  }, {
                    offset: 0.5,
                    color: String(progress) === '100'
                      ? 'rgba(246, 152, 63, 0.3)'
                      : 'rgba(85, 201, 246, 0.3)'
                  }])
                }
              }
            ]
          }
        ]
      };
    },
    handleClick() {
      this.$router.push('/progress/milestone');
    },
    async getData() {
      const params = {
        pageFlag: false,
        projectId: this.projectId
      };
      const { success, data: {
        data
      }} = await this.$Model.getMilepostList(params);
      if (success && data) {
        this.progressData = data.list || [];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/main";

.progress-comp {
  .progress-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    ul {
      height: 100%;
      overflow: hidden;
    }
    .progress-item {
      float: left;
      display: flex;
      width: 110px;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 12px;
      padding: 10px 5px 0;
      position: relative;
      &.success {
        color: #3fce84;
      }
      > div {
        width: 100%;
        text-align: center;
        height: 33%;
        display: flex;
        align-items: center;
        justify-content: center;
        &.title {
          align-items: flex-end;
          font-size: 14px;
          color: $mainColor;
          overflow: hidden;
        }
        &.icon-container {
          position: relative;
          .progress-bar {
            position: absolute;
            right: -33px;
            top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            i {
              font-size: 15px;
              margin: -3px;
              padding: 0;
            }
          }
        }
      }
      i {
        font-size: 26px;
        margin: 8px 0;
      }
      .progress-time {
        flex-direction: column;
        justify-content: flex-start;
        span {
          font-size: 12px;
          display: block;
        }
      }
      .ecahrts-container {
        width: 100%;
        height: 80px;
      }
    }
  }
}
</style>
